<template>
  <a-layout id="components-layout-demo-custom-trigger">
    <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
      <div class="logo" @click="$router.replace('/index')">电子名片</div>
      <a-menu theme="dark" mode="inline" :default-selected-keys="['1']">
        <a-menu-item key="1" @click="toUser">
          <a-icon type="user" />
          <span>用戶管理</span>
        </a-menu-item>
        <a-menu-item key="2" @click="toCard">
          <a-icon type="idcard" />
          <span>名片管理</span>
        </a-menu-item>
        <a-menu-item key="3" @click="toAudit">
          <a-icon type="scan" />
          <span>名片审核</span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #a1a3a6; padding: 0">
        <a-icon
            class="trigger"
            :type="collapsed ? 'menu-unfold' : 'menu-fold'"
            @click="() => (collapsed = !collapsed)"
        />
        <span style="color: white">律师电子名片系统</span>
        <div style="float: right;margin-right: 5%;width: 100px">
          <div style="display: flex;justify-content: space-around">
            <el-avatar src="http://csfz.oss-cn-shanghai.aliyuncs.com/jjc/%E7%AE%A1%E7%90%86%E5%91%98.png" style="margin-top: 10px"></el-avatar>
            <el-link @click="loginout" style="margin-left: 5px;color: white" :underline="false">退出</el-link>
          </div>
        </div>
      </a-layout-header>
      <a-layout-content
          :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }"
      >
        <router-view v-if="isRouterAlive"></router-view>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script>
import {logout} from "@/api/vcard";

export default {
  name: "Admin",
  provide(){
    return{
      reload:this.reload
    }
  },
  data() {
    return {
      isRouterAlive:true,
      collapsed: false,
    };
  },
  methods: {
    reload() {
      this.isRouterAlive = false
      this.$nextTick(function() {
        this.isRouterAlive = true
      })
    },
    toUser() {
      this.$router.push('/Admin/UserManage')
    },
    toCard() {
      this.$router.push('/Admin/CardManage')
    },
    toAudit() {
      this.$router.push('/Admin/auditManage')
    },
    //退出
    loginout() {
      logout().then(response => {
        if (response.success) {
          sessionStorage.removeItem("user")
          this.$router.push({
            name: 'Login'
          })
        } else {
          alert(response.message)
        }
      })
    }

  }
}

</script>

<style scoped>
#components-layout-demo-custom-trigger{
  height: 100vh;
}
#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
  text-align: center;
  line-height: 32px;
  color: white;
  cursor: pointer;
}
</style>